import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { ProductTypes, ProductCardContext } from '@/pages/components/ProductCard/ProductCardContext';
import ProductPicture from './ProductPicture/ProductPicture';
import ProductContent from './ProductContent/ProductContent';
type LocalCompProps = ProductTypes & ICompProps;
export interface IProps extends LocalCompProps {}
ProductCard.defaultProps = {} as Partial<IProps>;
function ProductCard(props: IProps) {
    const { className, style, onClick, ...other } = props;
    const localClassName = useClassName('ProductCard', className);
    return (
        <ProductCardContext.Provider value={other}>
            <RootView className={localClassName} style={style} onClick={onClick}>
                <ProductPicture></ProductPicture>
                <ProductContent></ProductContent>
            </RootView>
        </ProductCardContext.Provider>
    );
}
export default React.memo(ProductCard as FC<IProps>);
const RootView = styled(View)`
    &.ProductCard {
        display: flex;
        width: 690px;
        margin: 0 auto;
        /* &:not(:first-child) {
            margin-top: 56px;
        } */
        & + .ProductCard {
            margin-top: 56px;
        }
    }
`;
